<template>
    <div style="width: 100%;" @click="click()">
        <el-input v-show="showInput" ref="inputRef" v-model="data" @change="emits('update:content', data)"
            :autofocus="showInput" style="width: 100%; height:100%" placeholder="请输入内容" @blur="change" @keyup.enter="enter">
            <template v-if="data != source && showIcon" #append>
                <el-button :icon="Select" />
            </template>
        </el-input>
        <slot v-if="!showInput"></slot>
    </div>
</template>
<script setup lang="ts">
import { Select } from '@element-plus/icons-vue'
const props = defineProps({
    content: {
        type: String || Number || Object,
        default: ""
    },
    rename: {
        type: Boolean,
        default: false
    },
    showIcon: {
        type: Boolean,
        default: false
    },
    blurChange: {
        type: Boolean,
        default: false
    },
})
console.log(props.blurChange)
const emits = defineEmits(['update:content', "change"])
const data = toRef(props.content)
const showInput = ref(false)
const inputRef = ref()

let source = props.content
watch(() => props.content, (newValue) => {
    data.value = newValue
})

let lastTime = 0;
function click() {
    if (!props.rename)
        showInput.value = true;
    if (props.rename && lastTime) {
        let diff = Date.now() - lastTime;
        if (300 < diff && diff < 2000) {
            showInput.value = true;
            lastTime = 0;
        }
    }
    if (showInput.value) {
        inputRef.value.focus();
    }
    lastTime = Date.now()
}
function enter() {
    console.log(data.value, source, data.value != source)
    if (data.value != source) {
        emits('change', data.value, source)
        source = data.value
        showInput.value = false;
    }
}
function change() {
    showInput.value = false;
    if (props.blurChange)
        enter()
}
</script>
<style scoped></style>